<template>
	<view class="container">
		<view class="swiper_contain">
			<scroll-view class="swiper-tab" :scroll-x="true">
				<block>
					<view :class="currentTab == 0?'swiper-tab-list on':'swiper-tab-list'" @click="swichNav" :data-current="0">
						外出登记
					</view>
				</block>
				<block>
					<view :class="currentTab == 1?'swiper-tab-list on':'swiper-tab-list'" @click="swichNav" :data-current="1">
						返乡登记
					</view>
				</block>
			</scroll-view>
			<swiper :current="currentTab" @change="bindChange">
				<swiper-item>
					<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
						<view class="list-box" v-for="(item,index) in dataRecords" :key="index" @click="navTo(item,'/package_isp/pages/epidemic/egressRecordDetail')">
							<view class="list-title">
								<view class="title-text">{{item.address}}</view>
								<view>
									<text class="yticon icon-you title-icon"></text>
								</view>
							</view>
							<view class="list-cell">
								<view class="list-cell-item">
									<view class="item-title">登记人</view>
									<view class="item-info">{{item.name}}</view>
								</view>
								<view class="list-cell-item">
									<view class="item-title">联系电话</view>
									<view class="item-info">{{item.phone}}</view>
								</view>
								<view class="list-cell-item">
									<view class="item-title">登记时间</view>
									<view class="item-info">{{item.time}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
						<view class="list-box" v-for="(item,index) in dataRecords" :key="index" @click="navTo(item,'/package_isp/pages/epidemic/registrationDetail')">
							<view class="list-title">
								<view class="title-text">{{item.address}}-{{item.placeOfReturn}}</view>
								<view>
									<text class="yticon icon-you title-icon"></text>
								</view>
							</view>
							<view class="list-cell">
								<view class="list-cell-item">
									<view class="item-title">登记人</view>
									<view class="item-info">{{item.name}}</view>
								</view>
								<view class="list-cell-item">
									<view class="item-title">联系电话</view>
									<view class="item-info">{{item.phone}}</view>
								</view>
								<view class="list-cell-item">
									<view class="item-title">登记时间</view>
									<view class="item-info">{{item.time}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		data() {
			return {
				areaCode: this.$api.util.getAreaCode(),
				userId: "",
				currentTab: 0,
				page: 1,
				total: 0,
				pageSize: 5,
				loadingType: "more",
				dataRecords: []
			}
		},
		components: {
			uniLoadMore
		},
		onLoad() {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				this.userId = userInfo.userUuid
			}
			this.getRecord()
		},
		methods: {
			getRecord() {
				let params = {
					category: this.currentTab,
					page: this.page,
					pageSize: this.pageSize,
					areaCode: this.areaCode,
					userId: this.userId
				}
				this.$api.request.queryRegisterList(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.dataRecords = this.dataRecords.concat(res.body.data.list);
						if (this.dataRecords.length >= res.body.data.total) {
							this.loadingType = "noMore"
						}
					} else {
						this.$api.msg("查询列表失败")
					}
				})

			},
			swichNav: function(e) {
				this.currentTab = e.target.dataset.current;
			},
			bindChange: function(e) {
				this.currentTab = e.target.current
				this.loadingType = "more"
				this.page = 1;
				this.dataRecords = [];
				this.getRecord();
			},

			navTo(item, url) {
				uni.navigateTo({
					url: url + "?itemId=" + item.registerId
				})
			},
			//加载更多
			loadMore() {
				if (this.loadingType == 'more') {
					this.page = this.page + 1;
					// 查询数据
					this.getRecord();
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background-color: $page-color-base;
	}

	.list-scroll-content {
		height: 100%;
	}


	.on {
		color: #1DA3EE !important;
		border-bottom: 3upx solid #1DA3EE;
	}

	.list-box {
		margin: 30upx;
		background-color: white;
		border-radius: 20upx;
	}

	.container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: scroll;
	}

	.swiper_contain {
		height: 100%;
	}

	swiper {
		height: calc(100% - 100upx);
		padding: 0upx 0upx 20upx 0upx;
	}

	.swiper-tab {
		white-space: nowrap;
		text-align: center;
		line-height: 80upx;
		height: 100upx;
		background-color: white;
	}

	.swiper-tab-list {
		display: inline-block;
		margin: 0 30upx;
		font-size: 30upx;
		font-weight: 600;
		width: 160upx;
		color: #777777;
	}

	.swiper-box {
		display: block;
		width: 100%;
	}

	.swiper-box view {
		text-align: center;
	}

	.list-cell {
		padding: 0 30upx 30upx 30upx;
		background-color: white;

		.list-title {
			height: 90upx;
			line-height: 90upx;
			font-size: 30upx;
			font-weight: bolder;
		}

		.list-bottom {
			height: 90upx;
			line-height: 90upx;
		}

		.list-cell-item {
			height: 90upx;
			line-height: 90upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.item-title {
				font-size: 28upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				font-size: 24upx;
				text-align: right;
				margin-right: 20upx;
			}
		}
	}

	.list-title {
		background-color: white;
		padding-left: 40upx;
		height: 90upx;
		line-height: 90upx;
		border-bottom: 1px solid #e9eef5;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		letter-spacing: 2upx;

		.title-text {
			font-size: 32upx;
			font-weight: bolder;
			width: 75%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.title-icon {
			margin-right: 26upx;
			font-size: 30upx;
			font-weight: bold;
		}
	}
</style>
